<template>
	<view class="infochange" :style="{marginTop:systemBarHeight+'px'}">
		<view class="header">
			<view class="cancle" @tap="cancle">
				取消
			</view>
			<view class="info">
				{{title}}
			</view>
			<view class="decide" @tap = "decide">
				确定
			</view>
		</view>
		<view class="container">
			<textarea class="info oldinfo" v-show="flag" placeholder="原密码" maxlength="20" v-model="mypsw"
			></textarea>
			<textarea class="info newinfo" placeholder="修改内容" ref="aaa" v-model="myvalue"></textarea>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:''
			},
			value:{
				type:String,
				default:''
			},
			uid:{
				type:String,
				default:''
			},
			fid:{
				type:String,
				default:''
			},
			flag:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				myvalue:'',
				mypsw:'',
				systemBarHeight:''
			};
		},
		created() {
			this.getSysteminfo();
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			cancle(){
				this.$emit('close',false);			
			},
			decide(){
				if(this.uid != '' && this.fid != ''){
					// this.$emit('decide',{uid:this.uid,fid:this.fid},this.$refs.aaa.valueSync)
					this.$emit('decide',{uid:this.uid,fid:this.fid},this.myvalue)
				}
				else{
					if(this.flag){
						this.$emit('decide',this.title,this.myvalue,this.mypsw)
					}else{
						this.$emit('decide',this.title,this.myvalue)
					}
				}			
			}
		},
		watch:{
			flag(newvalue){
				this.mypsw = "";
			},
			value(newvalue){
				this.myvalue = newvalue
			}
		}
	}
</script>

<style lang="scss">
.infochange{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	background-color: #FFFFFF;
	z-index: 1300;
	.header{
		position: absolute;
		height: 120rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 36rpx;
		.cancle{
			width: 80rpx;
			flex: 0 0 80rpx;
			line-height: 120rpx;
			text-align: center;
			color: rgba(74, 71, 71, 100);
			font-size: 36rpx;
			font-weight: bold;
		}
		.info{
			flex: 1;
			text-align: center;
			color: rgba(74, 71, 71, 100);
			font-size: 56rpx;
			font-weight: bold;
			line-height: 120rpx;
		}
		.decide{
			width: 80rpx;
			line-height: 120rpx;
			flex: 0 0 80rpx;
			text-align: center;
			color: rgba(0, 122, 255, 100);
			font-weight: bold;
			font-size: 36rpx;
		}
	}
	.container{
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		padding: 42rpx 60rpx;
		box-sizing: border-box;
		.info{		
			box-sizing: border-box;
			width: 100%;
			border-radius: 24rpx;
			background-color: rgba(229, 229, 234, 100);
			border: 2rpx solid rgba(187, 187, 187, 100);
			padding: 10rpx 20rpx;
			color: rgba(74, 71, 71, 100);
			font-size: 32rpx;
			margin-bottom: 28rpx;
			color: rgba(74, 71, 71, 100);
			font-size: 28rpx;	
			line-height: 36rpx;
			&.oldinfo{
				height: 62rpx;
			}
			&.newinfo{
				height: 600rpx;
			}
		}
	}
}
</style>
